<template>
  <div class="page">
    <el-card class="login-card">
      <template #header>
        <div class="card-header">
          <span>登录面经后台</span>
        </div>
      </template>
      <template #default>
        <el-form ref="formRef" :model="form" :rules="loginRules">
          <el-form-item label="账号" label-position="top" size="large" prop="userName">
            <el-input v-model.trim="form.userName" placeholder="请输入用户名" />
          </el-form-item>
          <el-form-item label="密码" label-position="top" size="large" prop="passWord">
            <el-input v-model.trim="form.passWord" placeholder="请输入密码" type="password" :show-password="true" />
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <div class="form-buttons">
          <el-button type="primary" size="large" @click="login(formRef)">登录</el-button>
          <el-button size="large" @click="resetForm">重置</el-button>
        </div>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { loginRules } from '@/miscellaneous'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const router = useRouter()

defineOptions({
  name: 'LoginIndex'
})

// 拿取表单
const formRef = ref(null)

// 定义响应式表单数据
const form = reactive({
  userName: '',
  passWord: ''
})

// 重置表单函数
const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

// 主登录方法
const login = async () => {
  if (!formRef.value) return

  await formRef.value.validate(async (valid) => {
    if (!valid) {
      ElMessage({
        showClose: true,
        message: '请填写完整表单',
        type: 'error',
        duration: 3000
      })
      return
    }

    try {
      // 使用pinia中的登录方法
      const loginResult = await userStore.loginActions({
        username: form.userName,
        password: form.passWord
      })

      if (loginResult.success) {
        ElMessage({
          showClose: true,
          message: '登录成功',
          type: 'success',
          duration: 3000
        })
        // 登录成功后跳转到首页
        router.push('/home')
      } else {
        ElMessage({
          showClose: true,
          message: loginResult.data?.message || '登录失败',
          type: 'error',
          duration: 3000
        })
      }
    } catch {
      ElMessage({
        showClose: true,
        message: '登录失败，请重试',
        type: 'error',
        duration: 3000
      })
    }
  })
}
</script>

<style scoped lang="scss">
.page{
width: 100vw;
height: 100vh;
  background: url('@/assets/img/login.png') center/cover no-repeat;
  position: relative;
  overflow: hidden;
  &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      backdrop-filter: blur(1px);
    }
}

// 更新过时的 ::v-deep 为 :deep() 并添加透明输入框样式
.login-card {
  width: 42vw;
  /* 使得登录卡片居中 */
  margin: 20vh auto;
  border-radius: 50px;
  /* 添加半透明背景和毛玻璃效果 */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(1px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);

  :deep(.el-card__header) {
    color: white;
    text-align: center;
    padding: 20px 24px;
    font-weight: bold;
  }

  :deep(.el-form-item__label) {
    color: white;
    font-weight: bold;
  }

  // 透明输入框样式
  :deep(.el-input__wrapper) {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: none;

    &:hover {
      background-color: rgba(255, 255, 255, 0.15);
      border-color: rgba(255, 255, 255, 0.5);
      transform: scale(1.05);
      transition: all 0.3s ease;
    }

    &.is-focus {
      background-color: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.7);
      transform: scale(1.05);
      transition: all 0.3s ease;
    }
  }

  :deep(.el-input__inner) {
    background-color: transparent;
    color: white;
    font-size: 16px;

    &::placeholder {
      color: rgba(255, 255, 255, 0.7);
    }
  }

:deep(.el-input__icon){
  color: black;
}

// 按钮容器样式 - 响应式flex居中
.form-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
}

:deep(.el-button) {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;

  &:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
  }

  &:active {
    background-color: rgba(255, 255, 255, 0.15);
  }
}
}
</style>
